/*招标详情*/
<template>
	<view class="box">
		<!-- <u-navbar title="阀贸通" placeholder autoBack border></u-navbar> -->
		<view class="header">「阀贸通」招采信息一键查询 </view>
		<!-- 请退出重试 -->
		<view class="item" style="margin-top: 300rpx;" v-if="!info.id">
			<u-empty text="暂无数据,请退出重进" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
		<view class="title" v-if="info.id">
			<view class="content"><rich-text :nodes="info.title"></rich-text></view>
			<!-- <view class="id">(招标编号: {{ info.biddingNum }})</view> -->
			<view class="flex flex-jc-sb flex-ai-c">
				<view class="flex">
					<view class="flex flex-ai-c">
						<image src="../../static/zbgg@3x.png"
							style="width: 31rpx; height: 30rpx; margin-right: 10rpx;" />
						<view>招标公告</view>
					</view>
					<view class="flex flex-ai-c" style="margin-left: 50rpx;">
						<image src="../../static/dz2@3x.png"
							style="width: 23rpx; height: 30rpx; margin-right: 10rpx;" />
						<view>{{ optionsProvice(info.provinceCode) }}</view>
					</view>
				</view>
				<view class="flex flex-ai-c">
					<image src="../../static/nl@3x.png" style="width: 31rpx; height: 30rpx; margin-right: 10rpx;" />
					<view>{{ timestampToTime(info.createTime).slice(0, 11) }}</view>
				</view>
			</view>
		</view>
		<view class="details" v-if="info.id">
			<view class="details-title flex flex-ai-c">
				<view></view>
				<text>联系方式</text>
			</view>
			<view class="flex flex-fw-w ">
				<view class="unit-name flex flex-ai-c">
					<text>甲方联系人:</text>
					<view>{{ JSON.parse(info.project).contact == "null" || JSON.parse(info.project).tel == "" ? '暂无' :
                        JSON.parse(info.project).contact }}
					</view>
					<u-button type="primary" size="mini" v-if="JSON.parse(info.project).tel"
						@click="handleCopy(JSON.parse(info.project).contact)"
						style="height: 40rpx; margin: 0;">复制</u-button>
				</view>
				<view class="unit-name flex flex-ai-c">
					<text>甲方联系方式:</text>
					<view>{{ JSON.parse(info.project).tel == "null" || JSON.parse(info.project).tel == "" ? '暂无' :
                        JSON.parse(info.project).tel }}</view>
					<u-button type="primary" size="mini" v-if="JSON.parse(info.project).tel"
						@click="handleCopy(JSON.parse(info.project).tel)"
						style="height: 40rpx; margin: 0;">复制</u-button>
				</view>
				<view class="unit-name flex flex-ai-c" v-for="(item, index) in links" :key="index">
					<text>链接或附件{{ index + 1 }}</text>
					<u-button type="primary" size="mini" @click="handleCopyUrl(item)"
						style="height: 40rpx; margin: 0;">复制</u-button>
				</view>
				<!-- <view class="unit-name flex flex-ai-c">
                    <u-button type="primary" size="mini" @click="handleCopy('https://weizhongcloud.com/data/attachment/42/image/2024/04/7e7e9c0fa08c83de29d1097b41765159.jpg')"
                        style="height: 40rpx; margin: 0;">复制</u-button>
                </view> -->
			</view>
		</view>
		<view class="details" v-if="info.id">
			<view class="details-title flex flex-ai-c">
				<view></view>
				<text>公告内容</text>
			</view>
			<mp-html :content="info.content" />
		</view>
	</view>
</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	export default {
		data() {
			return {
				id: "",
				info: {
					createTime: ""
				},
				// 省列表
				optionsProviceCode: [{
					"label": "北京市",
					"value": "110000"
				}, {
					"label": "天津市",
					"value": "120000"
				}, {
					"label": "河北省",
					"value": "130000"
				}, {
					"label": "山西省",
					"value": "140000"
				}, {
					"label": "内蒙古自治区",
					"value": "150000"
				}, {
					"label": "辽宁省",
					"value": "210000"
				}, {
					"label": "吉林省",
					"value": "220000"
				}, {
					"label": "黑龙江省",
					"value": "230000"
				}, {
					"label": "上海市",
					"value": "310000"
				}, {
					"label": "江苏省",
					"value": "320000"
				}, {
					"label": "浙江省",
					"value": "330000"
				}, {
					"label": "安徽省",
					"value": "340000"
				}, {
					"label": "福建省",
					"value": "350000"
				}, {
					"label": "江西省",
					"value": "360000"
				}, {
					"label": "山东省",
					"value": "370000"
				}, {
					"label": "河南省",
					"value": "410000"
				}, {
					"label": "湖北省",
					"value": "420000"
				}, {
					"label": "湖南省",
					"value": "430000"
				}, {
					"label": "广东省",
					"value": "440000"
				}, {
					"label": "广西壮族自治区",
					"value": "450000"
				}, {
					"label": "海南省",
					"value": "460000"
				}, {
					"label": "重庆市",
					"value": "500000"
				}, {
					"label": "四川省",
					"value": "510000"
				}, {
					"label": "贵州省",
					"value": "520000"
				}, {
					"label": "云南省",
					"value": "530000"
				}, {
					"label": "西藏自治区",
					"value": "540000"
				}, {
					"label": "陕西省",
					"value": "610000"
				}, {
					"label": "甘肃省",
					"value": "620000"
				}, {
					"label": "青海省",
					"value": "630000"
				}, {
					"label": "宁夏回族自治区",
					"value": "640000"
				}, {
					"label": "新疆维吾尔自治区",
					"value": "650000"
				}, {
					"label": "台湾",
					"value": "660000"
				}, {
					"label": "香港",
					"value": "670000"
				}, {
					"label": "澳门",
					"value": "680000"
				}, ],
				links: []
			}
		},
		components: {
			mpHtml
		},
		onLoad(params) {
			// console.log(params);
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			uni.$req.post('/famenApi/system/integral/getInfo3', params).then(res => {
				uni.hideLoading();
				console.log(JSON.parse(res.data.project));
				if (res.code == "200") {
					// console.log(res);
					this.info = res.data
					// console.log(this.info);
					this.links = this.handleDetails(this.info.content)
				} else if (res.code == "500") {
					uni.showToast({
						title: "权限已丢失，请退出重试",
						icon: 'none',
						duration: 2000
					});
					/* uni.navigateBack({
					    delta: 1
					}) */
				}
			});

			/* uni.request({
			    url:'http://open.gc-zb.com/markInfo/project',
			    data:{
			        nid:"1234567890"
			    },
			    methods:'post',
			    headers:{
			        'content-type':'application/x-www-form-urlencoded'
			    },
			    success:(res)=>{
			        console.log(res);
			    }
			}).then((result) => {
			    console.log(result);
			}) */
		},
		methods: {
			// 复制
			handleCopy(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			handleCopyUrl(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							title: "复制成功,请到浏览器打开",
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			handleDetails(item) {

				// 使用正则表达式匹配http和https的链接
				const regex = /https?:\/\/[^\s"'<>]+/g;
				let links = item.match(regex);

				// 使用正则表达式匹配href里的链接
				const regex1 = /href="([^"]*)"/g;
				let match;
				while ((match = regex1.exec(item)) !== null) {
					links.push(match[1]);
				}

				if (links) {
					// 去文字
					links = links.map(str => str.split("）")[0]);
					// 有中文的直接去掉
					links = links.filter(str => !str.match(/[\u4e00-\u9fa5]/));
					// 没有http的加上https://www.gc-zb.com
					links = links.map(str => {
						if (!str.startsWith("http")) {
							return "https://www.gc-zb.com" + str;
						}
						return str;
					});
					links = links.filter(value => value !== "https://www.jxsggzy.cn/web/");
					links = links.filter(value => !value.includes("trade.html"));
					// 数组去重
					links = Array.from(new Set(links));
				}
				console.log(links);
				// 返回结果
				return links;
			},
			handleCopy(item) {
				uni.setClipboardData({
					data: item
				})
				uni.showToast({
					title: "复制成功",
					icon: 'none',
					duration: 2000
				})
			},
			// 筛选省
			optionsProvice(item) {
				let name = ''
				this.optionsProviceCode.filter((v) => {
					if (v.value == item) {
						name = v.label
					}
				})
				// console.log(`传入:${item}，结果:${name}`)
				return name
			},
			// 转变时间戳
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				var D = date.getDate() + " ";
				var h = date.getHours();
				h = h >= 10 ? h : "0" + h
				var m = date.getMinutes();
				m = m >= 10 ? m : "0" + m
				var s = date.getSeconds();
				s = s >= 10 ? s : "0" + s
				return Y + M + D + h + ":" + m + ":" + s;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 133rpx;
		line-height: 133rpx;
		font-weight: 600;
		background: linear-gradient(to top, #015EEA 0%, #00C0FA 100%);
		font-size: 53rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.title {
		height: 200rpx;
		margin-bottom: 20rpx;
		padding: 25rpx 23rpx 22rpx 20rpx;
		background-color: #fff;

		.content {
			font-weight: 500;
			font-size: 35rpx;
			color: #242424;
			line-height: 42rpx;
			height: 84rpx;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			margin-bottom: 20rpx;
		}

		.id {
			margin-bottom: 20rpx;
		}
	}

	.unit {
		padding: 32rpx 55rpx 32rpx 20rpx;
		background-color: #fff;
		margin-bottom: 26rpx;

		.unit-title {
			margin-bottom: 26rpx;

			view {
				width: 11rpx;
				height: 41rpx;
				background: #0059B9;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			text {
				font-family: SimHei;
				font-weight: 600;
				font-size: 35rpx;
				color: #1D1D1D;
			}
		}

		.unit-name {
			width: 80%;
			font-size: 33rpx;
			color: #1D1D1D;
			line-height: 44rpx;
			margin-bottom: 10rpx;

			view {
				margin-bottom: 20rpx;
				margin: 0 40rpx;
			}

			text {
				height: 29rpx;
				font-size: 30rpx;
				color: #616161;
				line-height: 44rpx;
			}
		}
	}

	.details {
		overflow: auto;
		padding: 32rpx 55rpx 32rpx 20rpx;
		background-color: #fff;
		margin-bottom: 26rpx;

		// table tr{
		//     width: 100% !important;
		//     display: inline-block;
		// }
		table {
			font-size: 20px;
			border-collapse: collapse;
		}

		table td {
			// width: 100%;
			// height: 100% !important;
			border: 1px solid #000;
			padding: 5px 10px;
			margin: 0 !important;
			// display: inline-block;
		}

		.unit-name {
			width: 100%;
			height: 29rpx;
			font-size: 30rpx;
			color: #616161;
			line-height: 44rpx;
			margin-bottom: 10rpx;

			view {
				// margin-bottom: 20rpx;
				margin: 0 20rpx;
			}
		}

		.details-title {
			margin-bottom: 26rpx;

			view {
				width: 11rpx;
				height: 41rpx;
				background: #0059B9;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			text {
				font-family: SimHei;
				font-weight: 600;
				font-size: 35rpx;
				color: #1D1D1D;
			}
		}
	}
</style>